import React from "react";
import { Tabbar } from "react-vant";
import { children_routers } from "../../router/routes";
import { useLocation, useNavigate } from "react-router-dom";

export const MyTabBar: React.FC = () => {
  const { pathname } = useLocation();
  const navigate = useNavigate();
  return (
    <Tabbar value={pathname} onChange={(name) => navigate(name as string)} placeholder>
      {children_routers.map((v, i) => {
        return (
          <Tabbar.Item name={v.path} icon={v.icon} key={i}>
            {v.title}
          </Tabbar.Item>
        );
      })}
    </Tabbar>
  );
};
